<template>
  <!--增删改查-->
   <el-row :gutter="20">
    <el-col :span="15">
      <nf-grid
        v-grid-drag="gridMeta"
        v-bind="gridMeta"
        :dataList="dataList"
        :selection="selection"
        size="small"
      />
       </el-col>
    <el-col :span="9">
      <nf-form
        v-form-drag="formMeta"
        :model="model"
        :partModel="model2"
        v-bind="formMeta"
      ></nf-form>
      <el-button type="" @click="add">添加</el-button>
   </el-col>
  </el-row>
</template>

<script lang="ts">
  import { defineComponent, reactive, computed } from 'vue'
  import {
    // getMetaDataState,
    toMetaGrid,
    toMetaForm
  } from '../../../../lib-excel/main'

  /**
   * 字段 meta
   */
  export default defineComponent({
    name: 'nf-crud-websql',
    props: {
    },
    setup(props, context) {

      // 获取表单和字段的meta
      const {
        dataList,
        gridMeta,
        itemMeta
      } = toMetaGrid()

      const selection = reactive({
        dataId: '', // 单选ID number 、string
        row: {}, // 单选的数据对象 {}
        dataIds: [], // 多选ID []
        rows: [] // 多选的数据对象 []
      })

      const model = reactive({})
      const model2 = reactive({})

      // 获取表单和字段的meta
      const {
        formMeta,
        colMeta
      } = toMetaForm(model)

      const add = () => {
        const newModel = {}
        Object.assign(newModel, model)
        dataList.push(newModel)
      }
      
      return {
        add,
        model,
        model2,
        formMeta,
        // 列表
        gridMeta,
        itemMeta,
        dataList,
        selection
      }
    }
  })
</script>